<template>
  <div id="change">
    <el-row :gutter="30">
      <el-col :span="4">
        <div class="sp" @click="sp" title="视频墙"></div>
      </el-col>
      <el-col :span="4">
        <div class="fk" @click="fk" title="周边俯瞰"></div>
      </el-col>
      <el-col :span="4">
        <div class="my" @click="my" title="室外漫游"></div>
      </el-col>
      <el-col :span="4">
        <div class="dymy" @click="dymy" title="第一人称"></div>
      </el-col>
      <el-col :span="4">
        <div class="cle" @click="clear" title="清除"></div>
      </el-col>
      <el-col :span="4">
        <div class="jp" @click="jpcontrol" title="键盘"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      isplay:false
    };
  },
  methods: {
    fk() {
      window.Sgworld.flyTo(
        -10151.6865234375,
        12266.5859375,
        10,
        0,
        -42.42491149902344,
        93.60037231445312,
        34610.44921875,
        () => {},
        4
      );
    },
    my() {
      // window.Sgworld.flyTo(
      //   -10151.6865234375,
      //   12266.5859375,
      //   10,
      //   0,
      //   -42.42491149902344,
      //   93.60037231445312,
      //   34610.44921875,
      //   () => {},
      //   1
      // );
      // setTimeout(() => {
      //   window.Sgworld.rotate(18, -360, () => {});
      // }, 1000);
      var params = {state:'play'};
      window.Sgworld.execute("grapi", "PlayLevelSequence", params, null);
    },
    dymy() {
      window.Sgworld.flyTo(
        11339.3486328125,
        -7123.11083984375,
        10,
        0,
        -20.14990997314453,
        168.00030517578125,
        20000,
        () => {},
        4
      );
      setTimeout(() => {
        window.Sgworld.flyTo(
          -37260.19140625,
          32940.44921875,
          10,
          0,
          -20.149904251098633,
          168.00030517578125,
          20000,
          () => {},
          20
        );
      }, 4000);
    },
    clear() {
      window.UEReset();
      window.viewInit();
      // window.UEGetAll();
      window.Sgworld.execute("grapi", "CarLine", { visibility: true }, null);
    },
    jpcontrol() {
      window.Sgworld.setMapFocus();
    },
    sp() {
      window.showVidwoWall();
    }
  },
};
</script>
<style scoped>
#change {
  position: absolute;
  left: 1100px;
  top: 200px;
  width: 500px;
}
.fk,
.my,
.dymy,
.cle,
.jp,
.sp {
  width: 64px;
  height: 64px;
  background: url("../../../static/images/modules/fk.png");
  cursor: pointer;
}
.my {
  background: url("../../../static/images/modules/my.png");
}
.dymy {
  background: url("../../../static/images/modules/dymy.png");
}
.cle {
  background: url("../../../static/images/modules/update.png");
}
.jp {
  background: url("../../../static/images/modules/key.png");
}
.sp {
  background: url("../../../static/images/modules/video.png");
}
.dymy:hover {
  background: url("../../../static/images/modules/dymys.png");
}
.fk:hover {
  background: url("../../../static/images/modules/fks.png");
}
.my:hover {
  background: url("../../../static/images/modules/mys.png");
}
.jp:hover {
  background: url("../../../static/images/modules/key-s.png");
}
.sp:hover {
  background: url("../../../static/images/modules/video-s.png");
}
</style>
